﻿<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <!--  bootstrap css样式表引入 -->
		<link rel="stylesheet" href="/meilishuo/b/css/bootstrap.css" />
 <style type="text/css">
	*{
		margin:0;
		padding:0;
	}
	li{
		list-style:none;
	}
	a{
		text-decoration:none;
		font-family:"微软雅黑";
	}
	#head{
		background-color:rgb(250,250,250);		
	}
	#h_bg{
		width:1200px;
		margin:0 auto;
		/* border:1px solid red; */
		overflow:hidden;
		padding:5px 0;
	}
	#h_bg a{
		display:inline-block;
		text-align:center;
		height:20px;
		line-height:20px;
	}
	#h_bg div{
		display:inline-block;
	}
	#shouye{
		height:18px;
		width:18px;
		background:url(img/mlsjl.png) no-repeat;
		margin-bottom:-3px;
	}
	#weixin{
		height:18px;
		width:25px;
		background:url(img/mlsjl.png) no-repeat -22px;
		margin-bottom:-3px;
	}
	#shoucang{
		height:18px;
		width:18px;
		background:url(img/mlsjl.png) no-repeat -76px;
		margin-bottom:-3px;
	}
	#gouwuche{
		height:18px;
		width:20px;
		background:url(img/mlsjl.png) no-repeat -101px;
		margin-bottom:-3px;
	}
	#dingdan{
		height:18px;
		width:16px;
		background:url(img/mlsjl.png) no-repeat -130px;
		margin-bottom:-3px;
	}
	#xiala{
		height:18px;
		width:16px;
		background:url(img/mlsjl.png) no-repeat -175px;
		margin-bottom:-3px;
	}
	#head a{
		font-size:15px;
		color:rgb(102,102,102);
	}
	#head .nav_zl{
		float:left;
		padding:0 20px;
		border-right:1px dotted gray;
	}
	#head #nav_select{
		float:right;
	}
	.tabmeun{
		width:70px;
		text-align:center;
		background-color:rgb(250,250,250);
		position:absolute;
	}
	.submeun ul{
		display:none;
	}
	#h_bg ul li:hover .tabmeun{
		display: block;
	}
	#seach{
		width:1200px;
		margin:0 auto;
	}
	#logo{
		float:left;
		margin-right:150px;
	}
	#seach_in #select{
		padding:5px 10px;
		background-color:rgb(255,51,102);
		color:#fff;
	}
	#seach_in input{
		width:500px;
		height:30px;
		padding-left:5px;
		border:2px solid rgb(255,51,102);
	}
	#seach_in button{
		height:34px;
		padding:5px 15px;
		color:#fff;
		background-color:rgb(255,51,102);
		border:2px solid rgb(255,51,102);
	}
	#seach_in{
		margin-top:30px;
	}
	#bs{
		padding-top:10px;
		margin-left:345px;
	}
	#seach_in #bs a{
		font-size:15px;	
	}
	.zi{
		color:rgb(255,51,102);
	}
	.zi1{
		color:#666666;
	}
	#erwei{
		float:right;
		margin-top:-30px;
	}
	#nav
	#nav li{
		float:left;
	}
	#nav{
		width:1200px;
		height:45px;
		margin:0 auto;
		margin-top:45px;
		line-height: 43px;
		font-weight: bold;
	}
	#nav .active{
		color:#f36;
		border-bottom:2px solid rgb(255,51,102);
	}
	#nav a{
		color:black;
		display:inline-block;
		margin-right:65px;
		font-size:16px;
		font-weight:bold;
	}
	#nav a:hover{
		color:rgb(255,51,102);
		border-bottom:2px solid rgb(255,51,102);
	}
	#body{
		width:1200px;
		margin:10px auto;
	}
	#rC{
		height:150px;
		width:1200px;
		border:1px solid #ddd;
	}
	.rW{
		height:110px;
		width:299px;				
		margin-top:20px;
		float:left;

		text-align:center;
	}
	.rW .title{
		font-size:14px;
		font-weight:bold;
		color:block;
	}
	.rW img{
		width:60px;
	}
	.rW .cC{
		font-size:12px;
		color:#666;
		margin-left:15px;
		float:left;
	}
	.rW .cC li{
		margin-bottom:10px;		
	}
	.cC li a{
		color:#555;
	}
	.cC li a:hover{
		color:#f36;
	}
	.cinfo{
		height:100px;
		width:60px;
		margin-left:30px;
		float:left;
	}
	.cinfo p{
		margin-bottom:5px;
		color:#000;
	}
	#order{
		height:45px;
		width:1200px;
		margin-top:8px;
		margin-bottom:5px;
		border:1px solid #ddd;
		background-color:#eee;
	}
	#orderinfo{
		float:left;			
	}
	#orderinfo a{
		padding:0 20px;
		height:43px;
		color:#666;
		font-size:14px;
		float: left;
		line-height: 43px;
	}
	#orderinfo a:hover{
		color:#f36;
	}
	#orderjg{
		height:30px;
		width:20px;
		display:inline-block;
		position:relative;
		left:-22px;
		top:17px;
		background:url(img/goumaijingling.png) no-repeat -655px 2px;
	}
	#orderjg #jgxl{
		width:70px;
		line-height:20px;
		font-size:14px;
		top:15px;
		left:-45px;
		background-color:#fff;
		text-align:center;
		position:relative;
		display:none;
	}
	#orderjg:hover #jgxl{
		display:inline-block;
	}
	.orderxz{
		background-color:#fff;
	}
	#xzjg{
		margin-top:12px;
	}
	#xzjg input{
		height:20px;
		width:60px;
		padding:0 5px;
		border: 1px solid #ddd;
	}
	#xzjg button{
		width: 45px;
		background-color: #fff;
		border: 1px solid #ddd;
	}
	#page{
		text-align:center;
	}
	#main{
		height:970px;
	}
	.ad{
		height:340px;
		width:224px;
	}
	.ad_c{
		height:400px;
		width:224px;
		float:left;
		margin-top:15px
	}
	.ad_d{
		margin-left:20px;
	}
	.wujiao{
		height:18px;
		width:18px;
		display:inline-block;
		background:url(img/mlsjl.png) no-repeat -76px;
		margin-bottom:-3px;
	}
	.jg{
		font-size:16px;
		line-height:30px;
		color:rgb(255,51,102);
	}
	.scs{
		float:right;
	}
	.sm{
		font-size:15px;
		color:rgb(102,102,102);
	}
	#foot{
		height:250px;
		border-top:#666;
		/* border:1px solid red; */
		background-color:rgb(250, 250, 250);
	}
	#foot table{
		width:700px;
		height:200px;
	}
	#foot tr{
		font-size:12px;
		color:rgb(102, 102, 102);
	}
	#foot #title{
		font-size:18px;
		font-weight:bold;
	}
	.guanzhu{
		display:inline-block;
	}
	#xinlang{
		height:18px;
		width:20px;
		background:url(img/guanzh.png) no-repeat;
		margin-bottom:-5px;
		margin-right:3px;
	}
	#Qkongjian{
		height:18px;
		width:20px;
		background:url(img/guanzh.png) no-repeat -28px;
		margin-bottom:-5px;
		margin-right:3px;
	}
	#tengxun{
		height:18px;
		width:20px;
		background:url(img/guanzh.png) no-repeat -56px;
		margin-bottom:-5px;
		margin-right:3px;
	}
	#erweima{
		float:right;
		margin-right:80px;
		margin-top:20px;
		text-align:center;
	}
	#erweima1{
		float:right;
		margin-right:100px;
		margin-top:20px;
		text-align:center;
	}
	#foot_ys{
		width:1200px;
		margin:0 auto;
		border-bottom:1px solid rgb(102, 102, 102);
	}
	#footer{
		text-align:center;
		font-size:12px;
		line-height:20px;
		color:rgb(102, 102, 102);
	}
	#footer a{
		color:rgb(102, 102, 102);
	}
	#footer a:hover{
		color:#f36;
	}
	.fixed{
		position:fixed;
		top:0;
		left:0;
		width:100%;
		margin-top:-45px;
		background-color:#fff;
		border-bottom:1px solid #ddd;
	}
  </style>
 </head>
 <body>
	<div id="global" style="border-bottom:1px solid #666;">
		<embed style="width: 100%;" type="text/html" src="header.html" />
		<div id="seach">
			<div id="logo">
				<img src="img/logo.jpg"/>
			</div>
			<div id="erwei">
				<img src="img/mlsew.gif"/>
			</div>
			<div id="seach_in">
				<a id="select">宝贝</a><br />
				<input type="text" /><button>搜索</button>
				<div id="bs">
					<a class="zi" href="#">流行Tee</a>
					<a class="zi1" href="#">长款连衣裙</a>
					<a class="zi" href="#">雪纺衫</a>
					<a class="zi" href="#">防晒</a>
					<a class="zi" href="#">夏天凉鞋</a>
					<a class="zi1" href="#">半身裙</a>
					<a class="zi" href="#">牛仔短裤</a>
					<a class="zi" href="#">小白鞋</a>
					<a class="zi1" href="#">新款包包</a>
					<a class="zi" href="#">明星同款</a>
				</div>
			</div>
		</div>
		<div id="nav_top">
			<div id="nav">
				<a href="#">首页</a>
				<a class="active" href="#">上衣</a>
				<a href="#">裙子</a>
				<a href="#">裤子</a>
				<a href="#">女鞋</a>
				<a href="#">包包</a>
				<a href="#">配饰</a>
				<a href="#">美妆</a>
				<a href="#">男友</a>
				<a href="#">童装</a>
				<a href="#">家居</a>		
			</div>
		</div>
	</div>
	<div id="body">
		<div id="rC">
			<div class="rW">
				<div class="cinfo">
					<a href="#"><p class="title">春季热卖</p></a>
					<img class="syzs" src="img/shangyi1.jpg" />
				</div>
				<div class="cC">
					<ul>
						<li><a href="#">短款外套</a></li>
						<li><a href="#">针织衫</a></li>
						<li><a href="#">丝绒美衣</a></li>
						<li><a href="#">棒球外套</a></li>
					</ul>
				</div>
				<div class="cC">
					<ul>
						<li><a href="#">卫衣</a></li>
						<li><a href="#">毛衣套装</a></li>
						<li><a href="#">牛仔外套</a></li>
						<li><a href="#">针织开衫</a></li>
					</ul>
				</div>
			</div>
			<div class="rW">
				<div class="cinfo">
					<a href="#"><p class="title">人气热卖</p></a>
					<img class="syzs" src="img/shangyi2.jpg" />
				</div>
				<div class="cC">
					<ul>
						<li><a href="#">T恤</a></li>
						<li><a href="#">V领上衣</a></li>
						<li><a href="#">套装</a></li>
						<li><a href="#">长款体恤</a></li>
					</ul>
				</div>
				<div class="cC">
					<ul>
						<li><a href="#">长款风衣</a></li>
						<li><a href="#">毛衣</a></li>
						<li><a href="#">风衣</a></li>
						<li><a href="#">日韩美衣</a></li>
					</ul>
				</div>
			</div>
			<div class="rW">
				<div class="cinfo">
					<a href="#"><p class="title">买穿百搭</p></a>
					<img class="syzs" src="img/shangyi3.jpg" />
				</div>
				<div class="cC">
					<ul>
						<li><a href="#">纯色T恤</a></li>
						<li><a href="#">连帽卫衣</a></li>
						<li><a href="#">基本款</a></li>
						<li><a href="#">字母T恤</a></li>
					</ul>
				</div>
				<div class="cC">
					<ul>
						<li><a href="#">白色衬衫</a></li>
						<li><a href="#">打底衫</a></li>
						<li><a href="#">运动衫</a></li>
						<li><a href="#">高领毛衣</a></li>
					</ul>
				</div>
			</div>
			<div class="rW">
				<div class="cinfo">
					<a href="#"><p class="title">潮流推荐</p></a>
					<img class="syzs" src="img/shangyi4.jpg" />
				</div>
				<div class="cC">
					<ul>
						<li><a href="#">复古喇叭袖</a></li>
						<li><a href="#">短款上衣</a></li>
						<li><a href="#">一字领上衣</a></li>
						<li><a href="#">蕾丝衫</a></li>
					</ul>
				</div>
				<div class="cC">
					<ul>
						<li><a href="#">运动套装</a></li>
						<li><a href="#">情侣装</a></li>
						<li><button  @click="categorySearch('裤子')">裤子</button></li>
						<li><button  @click="categorySearch('裙子')">裙子</button></li>
					</ul>
				</div>
			</div>
		</div>
		<div id="order">
			<div id="orderinfo">
				<a class="orderxz" href="#">流行</a>
				<button @click="conditionSearch('isHot' , 1 )"     >热销</button>
				<a       >上新</a>
				<button       >价格</button>
				<div id="orderjg">
					<div id="jgxl">
						<ul>
							<li @click="conditionSearch('price' , 'desc' )">由高到低</li>
							<li @click="conditionSearch('price' , 'asc'  )">由低到高</li>
						</ul>
					</div>
				</div>
			</div>
			<div id="xzjg">
			        商品名称
			    <input   v-model="searchInfo.productName"   type="text" placeholder="请输入商品关键字"/>
			         价格区间
				<input   v-model="searchInfo.minPrice"   type="text" placeholder="￥"/>~
				<input   v-model="searchInfo.maxPrice" type="text" placeholder="￥"/>
				<button  @click="changePage(1)">确认</button>
				<button  @click="allProduct(1)">全部商品</button>
			</div>
		</div>
		<div id="main">
			<div v-for=" (p , i) in  pageData " class="ad_c">
				<a href="xiangqing.html"><img class="ad" v-bind:src="p.pimage"/></a>
				<span class="jg">￥{{p.shopPrice}}</span>
				<div class="scs">
					<div class="wujiao"></div>{{p.collect}}
				</div>
				<br />
				<span class="sm">{{p.pname}}</span>
			</div>
		</div>
		<div id="page">
			 <center>
		       <p>
			     <button @click="changePage(1)" class="btn btn-danger">首页</button>
			     <button @click="changePage(pageInfo.upPage)"    class="btn btn-primary">上页</button>
			     <span v-if=" pageInfo.pageNo != pageInfo.totalPage ">
			        <button @click="changePage(pageInfo.nextPage)"  class="btn btn-primary">下页</button>
			        <button @click="changePage(pageInfo.totalPage)" class="btn btn-danger">尾页</button>
			     </span>
			     <span v-else>
			        <button disabled="disabled"  class="btn btn-primary" >下页</button>
			        <button  disabled="disabled"  class="btn btn-danger" >尾页</button>
			     </span>
			     
			            当前 {{pageInfo.pageNo}} / {{pageInfo.totalPage}} 页 每页{{pageInfo.count}} 条 共{{pageInfo.totalCount}}条
	        </p>
	       </center>
		</div>
	</div>
	<div id="foot">
		<div id="foot_ys">
			<div id="erweima"><h4>美丽说客户端下载</h4><img src="img/kehuduan.png"/></div>
			<div id="erweima1"><h4>美丽说微信服务号</h4><img src="img/fuwuhao.jpg"/></div>
			<table>
				<tr id="title">
					<td>买家帮助</td>
					<td>商家帮助</td>
					<td>关于我们</td>
					<td>关注我们</td>
				</tr>
				<tr>
					<td>新手指南</td>
					<td>供货商招募</td>
					<td>关于美丽说</td>
					<td><div id="xinlang" class="guanzhu"></div>新浪微博</td>
				</tr>
				<tr>
					<td>服务保障</td>
					<td>商家后台</td>
					<td>联系我们</td>
					<td><div id="Qkongjian" class="guanzhu"></div>QQ空间</td>
				</tr>
				<tr>
					<td>常见问题</td>
					<td>规则中心</td>
					<td></td>
					<td><div id="tengxun" class="guanzhu"></div>腾讯微博</td>
				</tr>
				<tr>
					<td>风险监测</td>
					<td></td>
					<td></td>
					<td></td>
				</tr>
			</table>
		</div>
		<div id="footer">
			Copyright ©2017 Meilishuo.com
			<a href="#">电信与信息服务业务经营许可证100798号</a>
			<a href="#">经营性网站备案信息</a>
			<br />
            京ICP备11031139号 京公网安备110108006045 客服电话：400-8158-666 文明办网文明上网举报电话：010-82615762  
			<a href="#">违法不良信息举报中心</a>
		</div>
	</div>
	<script type="text/javascript" src="js/jquery-2.1.0.js"></script>
	<script type="text/javascript" src="/meilishuo/js/vue.js"></script>
	<script type="text/javascript">
	     
	     var  app = new Vue({
	    	 el:"#body",
	    	 data:{
	    		 searchInfo:{},
	    		 pageInfo:{},
	    		 pageData:[]
	    	 },
	    	 methods:{
	    		 changePage:function(foo){
	    			 change(foo);
	    		 },
	    		 categorySearch:function(foo){
	    			 app.searchInfo.productName = foo;
	    			 change(1);
	    		 },
	    		 conditionSearch:function( a   ,  b ) {
	    			 //  var obj = {} ;  obj.name = 123 obj["name"] = 123;
	    			 app.searchInfo[a] = b; // 将 a的值当成key  将b存储到 pageInfo中 关键字是a的值
	    			 change(1);
	    		 },
	    		 allProduct(){
	    			  app.searchInfo = {};
	    			  change(1);
	    		 }
	    	 }
	     });
	     /*   将  分页信息 和 搜索条件 发送到后台     */
	     function  change( p ) {
	    	 $.post("/meilishuo/product/search?pageNo="+p  , app.searchInfo  , function(backData){
	    		  app.pageInfo = backData.data.pageInfo;
	    		  app.pageData = backData.data.pageData;
	    	 }  );
	     }
	     //默认首先加载第一页的数据
	     change(1);
	
	</script>
	
	
 </body>
</html>
